<template>
	<view v-if="template">
		<s-layout title="商家入驻" navbar="custom2"  color='#3D3D3D' onShareAppMessage>
			<view class="bg_white ss-m-16 ss-r-16 ss-flex-col">
				<view class="title ss-m-t-16"><text class="apply">申请服务</text><text class="more">可多选服务</text></view>
				<view class="ss-m-b-10">
					<fui-checkbox-group name="checkbox" v-model="serve" @change="change">
						<view class="fui-list__item">
							<fui-label :margin="['20rpx','0','10rpx','10rpx']">
								<view class="fui-align__center">
									<fui-checkbox value="1"  color="#8773F6"></fui-checkbox>
									<text class="fui-text">本地生活商家</text>
								</view>
							</fui-label>
							<fui-label :margin="['20rpx','0','10rpx','10rpx']">
								<view class="fui-align__center">
									<fui-checkbox value="2" color="#8773F6"></fui-checkbox>
									<text class="fui-text">电商品牌商家</text>
								</view>
							</fui-label>
						</view>
					</fui-checkbox-group>
				</view>
			</view>
			
			<view class="bg_white ss-m-16 ss-r-16 ss-flex-col">
				<view class="title ss-m-t-16"><text class="apply">基础信息</text></view>
				<view class="name ss-flex ss-row-between">
					<view class="name_text">姓名</view>
					<view class="input_view">
						<uni-easyinput class="input" :inputBorder="false" :placeholderStyle="placeholderStyle"   v-model="name"  placeholder="请输入姓名"></uni-easyinput>
					</view>	
				</view>
				<view class="devision"></view>
				<view class="name ss-flex ss-row-between">
					<view class="name_text">手机号</view>
					<view class="input_view">
						<uni-easyinput class="input" :inputBorder="false" :placeholderStyle="placeholderStyle"  v-model="mobile"  placeholder="请输入手机号码"></uni-easyinput>
					</view>	
				</view>
			</view>
			
			<view class="bg_white ss-m-16 ss-r-16 ss-flex-col">
				
				<view class="title ss-m-t-16"><text class="apply">法人实名认证</text></view>
				
				<view class="ss-flex ss-row-around ss-m-y-16">
					
					<image @click="imgClick(1)"  class="img" :src="calcProtrait"></image>
					
					<image @click="imgClick(2)" class="img" :src="calcReverse"></image>
				</view>
				
			</view>
			
			<view class="bg_white ss-m-16 ss-r-16 ss-p-10 ss-flex-col">
				
				<view class="title ss-m-t-16"><text class="apply">营业执照备案</text></view>
				
				<image class="audit ss-m-t-16" @click="imgClick(3)" :src="calcBusiness"></image>
				
			</view>
			
			<view class="bottom_view">
				<view class="btn" @click="btnClick">提交资料</view>
			</view>
		</s-layout>
	</view>			
</template>

<script setup>
import {
		computed,
		reactive,
		onBeforeMount,
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import tools from '@/sheep/helper/tools'
	import sheep from '@/sheep';
	import merchantApi from '@/sheep/api/merchant'
	import $share from '@/sheep/platform/share';
	import assNavbar from '@/components/ass-navbar.vue'
	import _ from 'lodash'
	import fuiCheckboxGroup from "@/components/fui-checkbox-group/fui-checkbox-group.vue"
	import fuiCheckbox from "@/components/fui-checkbox/fui-checkbox.vue"
	
	const template = computed(() => sheep.$store('app').template?.home);
	
	const placeholderStyle = ref("font-family: Source Han Sans;color:#D4D4D4;font-size:30rpx;");
	
	const serveList = [{name: '本地生活商家',disabled: false,id:1}, {name: '电商品牌商家',disabled: false,id:2}];
	
	const serve = ref([]);
	
	const name = ref('');
	
	const mobile = ref('');
	
	const protrait_card = ref('');
	
	const reverse_card = ref('');
	
	const business_license = ref('');

	const calcProtrait = computed(()=>{
		if(protrait_card.value==''){
			return 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405241639436491.png';	
		}
		return  protrait_card.value;
	})
	
	const calcReverse = computed(()=>{
		if(reverse_card.value==''){
			return 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405241639437012.png';
		}
		return  reverse_card.value;
	})
	
	const calcBusiness = computed(()=>{
		
		if(business_license.value==''){
			return 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405241649088042.png';
		}
		return business_license.value
	})
	
	const imgClick = (type)=>{
		uni.chooseImage({
			count:1,
			sizeType: ['original', 'compressed'],
			success:function(res) {
				uploadImg(res,type);
			}
			,
			fail:function (res){
				console.log(res);
			}
		});
	}
	
	const uploadImg = async(res,type)=>{
		
		const data = await sheep.$api.app.upload(res.tempFilePaths[0]);
	
		if(type==1){
			protrait_card.value = data.fullurl;
		}else if(type==2){
			reverse_card.value = data.fullurl;
		}else if(type==3){
			business_license.value = data.fullurl
		}
		console.log('protrait_card.value',protrait_card.value)
		
	}
	
	
	const btnClick = async()=>{
		
		var title = '';
		
		if(serve.value.length==0){
			title="请选择服务";
		}else if(name.value.length===0){
			title="请填写名字";
		}else if(mobile.value.length===0){
			title="请填写手机号";
		}else if(protrait_card.value.length===0){
			title="请上传身份证正面";
		}else if(reverse_card.value.length==0){
			title="请上传身份证反面";
		}else if(business_license.value.length==0){
			title="请上传营业执照";
		}
		
		if(title.length>0){
			uni.showToast({
				title:title,
				duration: 2000,
			});
			return false;
		}
		
		
		const data = await merchantApi.apply({
			
				serve:_.join(serve.value,','),
				name:name.value,
				mobile:mobile.value,
				protrait_card:protrait_card.value,
				reverse_card:reverse_card.value,
				business_license:business_license.value,		
			})
			
			
			uni.showToast({
				title: data.msg,
				duration: 2000
			});
			
			
			if(data.error==0){
				_.delay(function(text) {
					uni.switchTab({
						url: '/pages/index/user'
					});
				}, 1000, 'later');
			}
		
	}
	
</script>

<style lang="scss" scoped>
.bg_white{
	background-color:#FFFFFF;
}
.blank{
	background-color:#FFFFFF;
	width:100%;
	height:1rpx;
	border-radius:16rpx;
	
}
.blank_1{
	background-color:#FFFFFF;
	width:100%;
	height:10rpx;
	border-radius:16rpx;
}
.blank_3{
	background-color:#FFFFFF;
	width:100%;
	height:20rpx;
	border-radius:16rpx;
}
.title{
	margin-left: 16rpx;;
}

.devision{
	background-color:#F1F1F1;
	width:100%;
	height:1rpx;
}

.img{
	width:300rpx;
	height:200rpx;
}
.audit{
	width:calc(100% - 32rpx);
	height:300rpx;
	margin-left: 16rpx;
	margin-right: 16rpx;
}
.apply{
	font-family: Source Han Sans;
	font-weight:700;
	font-size:32rpx;
	line-height:48rpx;
	text-align:center;
	letter-spacing:1rpx;
	color:#323233;;
}
.more{
	font-family: PingFang SC;
	font-weight:400;
	font-size:20rpx;
	line-height:30rpx;
	text-align:center;
	letter-spacing:1rpx;
	color:#767676;
}
.fui-text{
	margin-left:10rpx;
	letter-spacing:1rpx;
	color:#333333;
}

.bottom_view {
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  height: 140rpx;
  background-color: #FFFFFF;


  .btn {
    background-color: #47DFBD;
    width: calc(100% - 40rpx);
    height: 80rpx;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-family: Source Han Sans;
    font-weight: 400;
    font-size: 32rpx;
    letter-spacing: 1rpx;;
    margin-bottom: 40rpx;
    margin-top: 20rpx;
	margin-left:20rpx;
	margin-right:20rpx;
  }
}
.name{
	
	.name_text{
		font-family: Source Han Sans;
		font-weight: 400;
		font-size: 30rpx;
		line-height:30rpx;
		letter-spacing: 1rpx;	
		margin-left:10rpx;
	}
	
	
}


::v-deep .input  .uni-easyinput{
	text-align:center;
}




</style>
